<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>服务详情 - 农业服务平台</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../favicon.ico">
    <link rel="icon" type="image/png" href="../images/logo.png">
    
    <script src="../js/tailwindcss-3.4.17.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        'primary-dark': '#059669',
                        'primary-light': '#34d399',
                        secondary: '#06b6d4',
                        accent: '#f59e0b',
                        danger: '#ef4444',
                        success: '#10b981',
                        neutral: '#f9fafb',
                        'neutral-dark': '#f3f4f6',
                        'text-primary': '#1f2937',
                        'text-secondary': '#6b7280'
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif']
                    },
                    boxShadow: {
                        'soft': '0 2px 8px rgba(0, 0, 0, 0.04)',
                        'medium': '0 4px 12px rgba(0, 0, 0, 0.08)',
                        'large': '0 8px 24px rgba(0, 0, 0, 0.12)',
                        'xl': '0 12px 32px rgba(0, 0, 0, 0.16)'
                    }
                }
            }
        }
    </script>
    
    <link rel="stylesheet" href="../css/all.min.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body class="bg-gradient-to-br from-slate-50 via-gray-50 to-neutral">
    <div class="container-app shadow-2xl">
        <!-- 头部导航 -->
        <header class="glass-effect sticky top-0 z-20 border-b border-gray-100 shadow-soft">
            <div class="px-4 py-3 flex items-center justify-between">
                <button onclick="window.history.back()" class="w-10 h-10 rounded-xl hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i class="fa fa-arrow-left text-text-primary text-lg"></i>
                </button>
                <h1 class="text-base font-bold text-text-primary flex-1 text-center" id="page-title">服务详情</h1>
                <button class="w-10 h-10 rounded-xl hover:bg-gray-100 flex items-center justify-center transition-colors" onclick="CommonUtils.showToast('分享功能开发中...', 'info')">
                    <i class="fa fa-share-alt text-text-primary text-lg"></i>
                </button>
            </div>
        </header>
        
        <main class="pb-20">
            <!-- 服务头部卡片 -->
            <section class="px-4 pt-4">
                <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-primary via-primary-dark to-emerald-700 p-6 shadow-xl">
                    <!-- 装饰性背景 -->
                    <div class="absolute inset-0 opacity-10">
                        <div class="absolute -top-10 -right-10 w-40 h-40 bg-white rounded-full blur-2xl"></div>
                        <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-white rounded-full blur-2xl"></div>
                    </div>
                    
                    <!-- 内容 -->
                    <div class="relative">
                        <div class="flex items-start gap-4 mb-4">
                            <div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-md flex items-center justify-center flex-shrink-0 shadow-large">
                                <i id="service-icon" class="fa fa-building text-white text-3xl"></i>
                            </div>
                            <div class="flex-1">
                                <h2 id="service-name" class="text-2xl font-bold text-white mb-2">办公场地</h2>
                                <div class="flex items-center gap-3">
                                    <div class="flex items-center gap-1">
                                        <i class="fa fa-star text-yellow-300 text-sm"></i>
                                        <i class="fa fa-star text-yellow-300 text-sm"></i>
                                        <i class="fa fa-star text-yellow-300 text-sm"></i>
                                        <i class="fa fa-star text-yellow-300 text-sm"></i>
                                        <i class="fa fa-star-half-o text-yellow-300 text-sm"></i>
                                        <span class="text-white/90 text-sm ml-1">4.8</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 统计信息 -->
                        <div class="grid grid-cols-3 gap-3">
                            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-3 text-center">
                                <div class="text-white text-xl font-bold">2.6k</div>
                                <div class="text-white/70 text-xs mt-1">使用次数</div>
                            </div>
                            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-3 text-center">
                                <div class="text-white text-xl font-bold">98%</div>
                                <div class="text-white/70 text-xs mt-1">满意度</div>
                            </div>
                            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-3 text-center">
                                <div class="text-white text-xl font-bold">586</div>
                                <div class="text-white/70 text-xs mt-1">评价数</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 快速操作按钮 -->
            <section class="px-4 py-4">
                <div class="grid grid-cols-4 gap-2">
                    <button class="bg-white rounded-xl p-3 shadow-soft hover:shadow-medium transition-all border border-gray-100 flex flex-col items-center gap-2" onclick="CommonUtils.showToast('咨询功能开发中...', 'info')">
                        <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
                            <i class="fa fa-comments text-primary text-lg"></i>
                        </div>
                        <span class="text-xs text-text-secondary">在线咨询</span>
                    </button>
                    <button class="bg-white rounded-xl p-3 shadow-soft hover:shadow-medium transition-all border border-gray-100 flex flex-col items-center gap-2" onclick="CommonUtils.showToast('收藏功能开发中...', 'info')">
                        <div class="w-10 h-10 rounded-xl bg-accent/10 flex items-center justify-center">
                            <i class="fa fa-heart text-accent text-lg"></i>
                        </div>
                        <span class="text-xs text-text-secondary">收藏</span>
                    </button>
                    <button class="bg-white rounded-xl p-3 shadow-soft hover:shadow-medium transition-all border border-gray-100 flex flex-col items-center gap-2" onclick="CommonUtils.showToast('电话功能开发中...', 'info')">
                        <div class="w-10 h-10 rounded-xl bg-secondary/10 flex items-center justify-center">
                            <i class="fa fa-phone text-secondary text-lg"></i>
                        </div>
                        <span class="text-xs text-text-secondary">电话</span>
                    </button>
                    <button class="bg-white rounded-xl p-3 shadow-soft hover:shadow-medium transition-all border border-gray-100 flex flex-col items-center gap-2" onclick="CommonUtils.showToast('预约功能开发中...', 'info')">
                        <div class="w-10 h-10 rounded-xl bg-purple-500/10 flex items-center justify-center">
                            <i class="fa fa-calendar text-purple-500 text-lg"></i>
                        </div>
                        <span class="text-xs text-text-secondary">预约</span>
                    </button>
                </div>
            </section>
            
            <!-- 服务介绍 -->
            <section class="px-4 pb-4">
                <div class="bg-white rounded-2xl p-5 shadow-soft border border-gray-100">
                    <div class="flex items-center gap-2 mb-4">
                        <div class="w-1 h-5 bg-primary rounded-full"></div>
                        <h3 class="text-base font-bold text-text-primary">服务介绍</h3>
                    </div>
                    <p id="service-description" class="text-text-secondary text-sm leading-relaxed">
                        为农业企业提供专业的办公场地租赁服务，配套设施齐全，环境优美，交通便利。
                    </p>
                </div>
            </section>
            
            <!-- 服务特色 -->
            <section class="px-4 pb-4">
                <div class="bg-white rounded-2xl p-5 shadow-soft border border-gray-100">
                    <div class="flex items-center gap-2 mb-4">
                        <div class="w-1 h-5 bg-primary rounded-full"></div>
                        <h3 class="text-base font-bold text-text-primary">服务特色</h3>
                    </div>
                    <div id="service-features" class="space-y-3">
                        <!-- 动态加载 -->
                    </div>
                </div>
            </section>

            <!-- 服务流程 -->
            <section class="px-4 pb-4">
                <div class="bg-white rounded-2xl p-5 shadow-soft border border-gray-100">
                    <div class="flex items-center gap-2 mb-4">
                        <div class="w-1 h-5 bg-primary rounded-full"></div>
                        <h3 class="text-base font-bold text-text-primary">服务流程</h3>
                    </div>
                    <div class="relative">
                        <!-- 流程线 -->
                        <div class="absolute left-6 top-8 bottom-8 w-0.5 bg-gradient-to-b from-primary via-primary-light to-primary"></div>
                        
                        <div class="space-y-6">
                            <div class="flex gap-4">
                                <div class="relative z-10 w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center flex-shrink-0 shadow-medium">
                                    <span class="text-white font-bold">1</span>
                                </div>
                                <div class="flex-1 pt-2">
                                    <h4 class="font-bold text-sm text-text-primary mb-1">提交需求</h4>
                                    <p class="text-xs text-text-secondary">填写需求表单，提交服务申请</p>
                                </div>
                            </div>
                            
                            <div class="flex gap-4">
                                <div class="relative z-10 w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center flex-shrink-0 shadow-medium">
                                    <span class="text-white font-bold">2</span>
                                </div>
                                <div class="flex-1 pt-2">
                                    <h4 class="font-bold text-sm text-text-primary mb-1">方案沟通</h4>
                                    <p class="text-xs text-text-secondary">专业顾问与您沟通具体方案</p>
                                </div>
                            </div>
                            
                            <div class="flex gap-4">
                                <div class="relative z-10 w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center flex-shrink-0 shadow-medium">
                                    <span class="text-white font-bold">3</span>
                                </div>
                                <div class="flex-1 pt-2">
                                    <h4 class="font-bold text-sm text-text-primary mb-1">签约合作</h4>
                                    <p class="text-xs text-text-secondary">确认方案，签订服务协议</p>
                                </div>
                            </div>
                            
                            <div class="flex gap-4">
                                <div class="relative z-10 w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center flex-shrink-0 shadow-medium">
                                    <span class="text-white font-bold">4</span>
                                </div>
                                <div class="flex-1 pt-2">
                                    <h4 class="font-bold text-sm text-text-primary mb-1">服务交付</h4>
                                    <p class="text-xs text-text-secondary">开始提供专业服务支持</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 用户评价 -->
            <section class="px-4 pb-4">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-base font-bold text-text-primary">用户评价</h3>
                    <a href="javascript:void(0)" class="text-xs text-primary" onclick="CommonUtils.showToast('查看更多评价...', 'info')">查看全部 →</a>
                </div>
                <div class="space-y-3">
                    <div class="bg-white rounded-2xl p-4 shadow-soft border border-gray-100">
                        <div class="flex items-start gap-3 mb-3">
                            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-primary-dark flex items-center justify-center text-white font-bold flex-shrink-0">
                                张
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center justify-between mb-1">
                                    <span class="font-bold text-sm text-text-primary">张*明</span>
                                    <div class="flex items-center gap-1">
                                        <i class="fa fa-star text-yellow-400 text-xs"></i>
                                        <i class="fa fa-star text-yellow-400 text-xs"></i>
                                        <i class="fa fa-star text-yellow-400 text-xs"></i>
                                        <i class="fa fa-star text-yellow-400 text-xs"></i>
                                        <i class="fa fa-star text-yellow-400 text-xs"></i>
                                    </div>
                                </div>
                                <p class="text-xs text-text-secondary">服务非常专业，解决了我们的办公需求，环境很好，推荐！</p>
                                <div class="text-xs text-text-secondary mt-2">2天前</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-2xl p-4 shadow-soft border border-gray-100">
                        <div class="flex items-start gap-3 mb-3">
                            <div class="w-10 h-10 rounded-full bg-gradient-to-br from-secondary to-cyan-600 flex items-center justify-center text-white font-bold flex-shrink-0">
                                李
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center justify-between mb-1">
                                    <span class="font-bold text-sm text-text-primary">李*华</span>
                                    <div class="flex items-center gap-1">
                                        <i class="fa fa-star text-yellow-400 text-xs"></i>
                                        <i class="fa fa-star text-yellow-400 text-xs"></i>
                                        <i class="fa fa-star text-yellow-400 text-xs"></i>
                                        <i class="fa fa-star text-yellow-400 text-xs"></i>
                                        <i class="fa fa-star-o text-gray-300 text-xs"></i>
                                    </div>
                                </div>
                                <p class="text-xs text-text-secondary">性价比很高，工作人员态度很好，配套设施齐全。</p>
                                <div class="text-xs text-text-secondary mt-2">5天前</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 相关推荐 -->
            <section class="px-4 pb-4">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-base font-bold text-text-primary">相关推荐</h3>
                    <a href="javascript:void(0)" class="text-xs text-primary" onclick="CommonUtils.showToast('查看更多推荐...', 'info')">更多 →</a>
                </div>
                <div class="space-y-3" id="related-services">
                    <!-- 动态加载 -->
                    <div class="bg-white rounded-2xl shadow-soft border border-gray-100 overflow-hidden group cursor-pointer hover:shadow-medium transition-all" onclick="CommonUtils.showToast('功能开发中...', 'info')">
                        <div class="flex gap-3 p-3">
                            <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=150&h=150&fit=crop" 
                                 alt="推荐" class="w-24 h-24 object-cover rounded-xl flex-shrink-0">
                            <div class="flex-1 min-w-0">
                                <div class="flex items-start justify-between mb-1">
                                    <h4 class="font-bold text-sm text-text-primary group-hover:text-primary transition-colors">金融贷款服务</h4>
                                    <span class="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full flex-shrink-0 ml-2">热门</span>
                                </div>
                                <p class="text-text-secondary text-xs line-clamp-2 mb-2">为农业企业提供低息贷款服务，快速审批...</p>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-1 text-xs text-text-secondary">
                                        <i class="fa fa-star text-yellow-400"></i>
                                        <span>4.9分</span>
                                    </div>
                                    <span class="text-primary text-sm font-bold">了解详情 →</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-2xl shadow-soft border border-gray-100 overflow-hidden group cursor-pointer hover:shadow-medium transition-all" onclick="CommonUtils.showToast('功能开发中...', 'info')">
                        <div class="flex gap-3 p-3">
                            <img src="https://images.unsplash.com/photo-1556761175-4b46a572b786?w=150&h=150&fit=crop" 
                                 alt="推荐" class="w-24 h-24 object-cover rounded-xl flex-shrink-0">
                            <div class="flex-1 min-w-0">
                                <div class="flex items-start justify-between mb-1">
                                    <h4 class="font-bold text-sm text-text-primary group-hover:text-primary transition-colors">劳务派遣服务</h4>
                                    <span class="px-2 py-1 bg-accent/10 text-accent text-xs rounded-full flex-shrink-0 ml-2">推荐</span>
                                </div>
                                <p class="text-text-secondary text-xs line-clamp-2 mb-2">专业的劳务派遣服务，解决用工难题...</p>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-1 text-xs text-text-secondary">
                                        <i class="fa fa-star text-yellow-400"></i>
                                        <span>4.7分</span>
                                    </div>
                                    <span class="text-primary text-sm font-bold">了解详情 →</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        <!-- 底部操作栏 -->
        <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200 px-4 py-3 shadow-xl z-20">
            <div class="flex gap-3">
                <button class="flex-1 h-12 bg-gradient-to-r from-primary to-primary-dark text-white rounded-xl font-bold text-sm shadow-large hover:shadow-xl transition-all flex items-center justify-center gap-2" onclick="CommonUtils.showToast('立即使用功能开发中...', 'success')">
                    <i class="fa fa-check-circle"></i>
                    立即使用
                </button>
                <button class="w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center hover:bg-gray-200 transition-colors" onclick="CommonUtils.showToast('客服功能开发中...', 'info')">
                    <i class="fa fa-comment text-text-primary text-lg"></i>
                </button>
            </div>
        </div>
    </div>

    <script src="../js/common.js"></script>
    <script src="../js/navigation.js"></script>
    <script src="../js/animate.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const serviceDetail = Navigation.getServiceDetail();
            
            if (serviceDetail) {
                // 更新页面标题和服务名称
                document.getElementById('page-title').textContent = serviceDetail.title;
                document.getElementById('service-name').textContent = serviceDetail.title;
                document.getElementById('service-icon').className = 'fa ' + serviceDetail.icon + ' text-white text-3xl';
                document.getElementById('service-description').textContent = serviceDetail.description;
                
                // 渲染服务特色
                const featuresContainer = document.getElementById('service-features');
                if (serviceDetail.features && serviceDetail.features.length > 0) {
                    featuresContainer.innerHTML = serviceDetail.features.map((feature, index) => {
                        const colors = [
                            'from-primary/10 to-primary/5 text-primary',
                            'from-secondary/10 to-secondary/5 text-secondary',
                            'from-accent/10 to-accent/5 text-accent',
                            'from-purple-500/10 to-purple-500/5 text-purple-500'
                        ];
                        const colorClass = colors[index % colors.length];
                        
                        return `
                            <div class="flex items-start gap-3 p-3 rounded-xl bg-gradient-to-br ${colorClass.split(' ').slice(0, 2).join(' ')} border border-gray-100/50">
                                <div class="w-10 h-10 rounded-xl bg-white flex items-center justify-center flex-shrink-0 shadow-soft">
                                    <i class="fa fa-check-circle ${colorClass.split(' ')[2]} text-lg"></i>
                                </div>
                                <div class="flex-1 pt-1">
                                    <div class="text-sm font-bold text-text-primary mb-1">${feature.title}</div>
                                    <div class="text-xs text-text-secondary leading-relaxed">${feature.desc}</div>
                                </div>
                            </div>
                        `;
                    }).join('');
                } else {
                    // 默认特色
                    featuresContainer.innerHTML = `
                        <div class="flex items-start gap-3 p-3 rounded-xl bg-gradient-to-br from-primary/10 to-primary/5 border border-gray-100/50">
                            <div class="w-10 h-10 rounded-xl bg-white flex items-center justify-center flex-shrink-0 shadow-soft">
                                <i class="fa fa-check-circle text-primary text-lg"></i>
                            </div>
                            <div class="flex-1 pt-1">
                                <div class="text-sm font-bold text-text-primary mb-1">专业团队</div>
                                <div class="text-xs text-text-secondary leading-relaxed">拥有丰富经验的专业团队提供服务</div>
                            </div>
                        </div>
                        <div class="flex items-start gap-3 p-3 rounded-xl bg-gradient-to-br from-secondary/10 to-secondary/5 border border-gray-100/50">
                            <div class="w-10 h-10 rounded-xl bg-white flex items-center justify-center flex-shrink-0 shadow-soft">
                                <i class="fa fa-check-circle text-secondary text-lg"></i>
                            </div>
                            <div class="flex-1 pt-1">
                                <div class="text-sm font-bold text-text-primary mb-1">高效便捷</div>
                                <div class="text-xs text-text-secondary leading-relaxed">快速响应，高效处理您的需求</div>
                            </div>
                        </div>
                        <div class="flex items-start gap-3 p-3 rounded-xl bg-gradient-to-br from-accent/10 to-accent/5 border border-gray-100/50">
                            <div class="w-10 h-10 rounded-xl bg-white flex items-center justify-center flex-shrink-0 shadow-soft">
                                <i class="fa fa-check-circle text-accent text-lg"></i>
                            </div>
                            <div class="flex-1 pt-1">
                                <div class="text-sm font-bold text-text-primary mb-1">安全可靠</div>
                                <div class="text-xs text-text-secondary leading-relaxed">严格把控服务质量，确保安全可靠</div>
                            </div>
                        </div>
                    `;
                }
            }
            
            // 初始化按钮反馈
            CommonUtils.initButtonFeedback();
        });
    </script>
</body>
</html>
